<template>
	<view class="selectAddressContainer">
		<!--  -->
		<view class="addressGPS">
			<view class="address">上海市
				<u-icon name="arrow-down-fill" size="20" class="addressIcon"></u-icon>
			</view>
			<view class="searchAddress">
				<u-icon class="searchIcon" name="search" color="gary" size="24"></u-icon>
				<input class="searchInput" type="text" v-model="searchValue" placeholder="请输入您的收货地址" />
			</view>
		</view>
		<!-- 地图 -->
		<map class="addressMap" :latitude="latitude" :longitude="longitude" id="map1" ref="map1"></map>
		<!-- 附近地址 -->
		<view class="currentAddressContainer">
			<scroll-view scroll-y="true" style="height: calc(100vh - 380rpx);">
				<view class="otherAddress">
					<view class="otherAddressItem">方舟园</view>
					<view class="otherAddress1">松江区谷阳北路526弄1</view>
					<view class="addressBorderBottom"></view>
				</view>
				<view class="otherAddress">
					<view class="otherAddressItem">方舟园</view>
					<view class="otherAddress1">松江区谷阳北路526弄1</view>
					<view class="addressBorderBottom"></view>
				</view>
				<view class="otherAddress">
					<view class="otherAddressItem">方舟园</view>
					<view class="otherAddress1">松江区谷阳北路526弄1</view>
					<view class="addressBorderBottom"></view>
				</view>
				<view class="otherAddress">
					<view class="otherAddressItem">方舟园</view>
					<view class="otherAddress1">松江区谷阳北路526弄1</view>
					<view class="addressBorderBottom"></view>
				</view>
				<view class="otherAddress">
					<view class="otherAddressItem">方舟园</view>
					<view class="otherAddress1">松江区谷阳北路526弄1</view>
					<view class="addressBorderBottom"></view>
				</view>
				<view class="otherAddress">
					<view class="otherAddressItem">方舟园</view>
					<view class="otherAddress1">松江区谷阳北路526弄1</view>
					<view class="addressBorderBottom"></view>
				</view>
				<view class="otherAddress">
					<view class="otherAddressItem">方舟园</view>
					<view class="otherAddress1">松江区谷阳北路526弄1</view>
					<view class="addressBorderBottom"></view>
				</view>
				<view class="otherAddress">
					<view class="otherAddressItem">方舟园</view>
					<view class="otherAddress1">松江区谷阳北路526弄1</view>
					<view class="addressBorderBottom"></view>
				</view>
				<view class="otherAddress">
					<view class="otherAddressItem">方舟园</view>
					<view class="otherAddress1">松江区谷阳北路526弄1</view>
					<view class="addressBorderBottom"></view>
				</view>
				<view class="otherAddress">
					<view class="otherAddressItem">方舟园</view>
					<view class="otherAddress1">松江区谷阳北路526弄1</view>
					<view class="addressBorderBottom"></view>
				</view>
				
				<view class="otherAddress">
					<view class="otherAddressItem">方舟园</view>
					<view class="otherAddress1">松江区谷阳北路526弄1</view>
					<view class="addressBorderBottom"></view>
				</view>
				<view class="otherAddress">
					<view class="otherAddressItem">方舟园</view>
					<view class="otherAddress1">松江区谷阳北路526弄1</view>
					<view class="addressBorderBottom"></view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: 0,
				longitude: 0,
				
			};
		},
		
		onReady(){
			// Map plus.maps.getMapById(id);
		},
		methods: {
			// getAuthorizeInfo(a="scope.userLocation"){  //1. uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗
			// 	let _this=this;
			// 	uni.authorize({
			// 		scope: a,
			// 		success() { //1.1 允许授权
			// 			_this.getLocationInfo();
			// 		},
			// 		fail(){    //1.2 拒绝授权
			// 			console.log("你拒绝了授权，无法获得周边信息")
			// 		}
			// 	})
			// },
			// getLocationInfo(){  //2. 获取地理位置
			// 	let _this=this;
			// 	uni.getLocation({
			// 		type: 'wgs84',
			// 		success (res) {
			// 			console.log(res)
			// 			let latitude,longitude;
			// 			latitude = res.latitude.toString();
			// 			longitude = res.longitude.toString();
			// 			uni.request({
			// 				header:{
			// 					"Content-Type": "application/text"
			// 				},
			// 				url:'http://apis.map.qq.com/ws/geocoder/v1/?location='+latitude+','+longitude+'&key=MVGBZ-R2U3U-W5CVY-2PQID-AT4VZ-PDF35',
			// 				success(addres) {
			// 					console.log(addres)	   
			// 					if(addres.statusCode===200){
			// 						console.log("获取中文街道地理位置成功")
			// 					}else{
			// 						console.log("获取信息失败，请重试！")
			// 					}
			// 				 }
			// 			});
			// 		}
			// 	});
			// },
			// isGetLocation(a="scope.userLocation"){ // 3. 检查当前是否已经授权访问scope属性，参考下截图
			// 	let _this=this;
			// 	uni.getSetting({
			// 	    success(res) {					
			// 			if (!res.authSetting[a]) {  //3.1 每次进入程序判断当前是否获得授权，如果没有就去获得授权，如果获得授权，就直接获取当前地理位置
			// 				_this.getAuthorizeInfo()
			// 			}else{
			// 				_this.getLocationInfo()
			// 			}
			// 		}
			// 	});
			// },
			// // 
		},
		
		onLoad() {
			let _this=this;
			uni.getLocation({
			    type: 'wgs84',
				geocode:true,
			    success: function (res) {
					console.log(res)
					_this.longitude = res.longitude;
					_this.latitude = res.latitude
			        console.log('当前位置的经度：' + res.longitude);
			        console.log('当前位置的纬度：' + res.latitude);
			    }
			});
		}

	}
</script>

<style lang="scss">
.selectAddressContainer{
	.addressGPS {
		display: flex;
		justify-content: space-around;
		padding-bottom: 10rpx;
		.addressIcon{
			padding-left: 10rpx;
		}
		.searchAddress {
			position: relative;
			.searchIcon {
				position: absolute;
				top: 0;
				left: 20rpx;
			}
			.searchInput {
				width: 520rpx;
				border-radius: 50rpx;
				padding-left: 50rpx;
				background-color: pink;
			}
		}
	}
	.addressMap{
		margin-top: 20rpx;
		width: 100%;
	}
	.currentAddressContainer{
		.otherAddress {
			margin: 20rpx;
			.otherAddress1{
				font-size: 22rpx;
				color: gray;
			}
			.addressBorderBottom {
				border-bottom: 1px solid red;
				margin-top: 20rpx;
			}
		}	
	}
	
}
</style>
